<template>
  <div>
    <canvas id="container" width="100%"></canvas>
  </div>
</template>

<script lang="ts">
import F2 from '@antv/f2'
import axios from 'axios'
import Component from 'vue-class-component'
// import Pan from '@antv/f2/lib/interaction/pan'
import ScrollBar from '@antv/f2/lib/plugin/scroll-bar'
import Vue from 'vue'
require('@antv/f2/lib/interaction/pan') // 引入图表平移交互
// 引入所有的交互行为
require('@antv/f2/lib/interaction/')

// const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar')
// F2.Chart.plugins.register(ScrollBar)
// F2.Chart.plugins.register(Pan)
@Component
export default class TestVue extends Vue {
  mounted () {
    axios
      .get(
        'https://gw.alipayobjects.com/os/antfincdn/Jpuku6k%24q%24/linear-pan.json'
      )
      .then((res) => {
        const data = res.data
        const chart = new F2.Chart({
          id: 'container',
          pixelRatio: window.devicePixelRatio,
          plugins: ScrollBar
        })
        chart.source(data, {
          release: {
            min: 1970,
            max: 2010
          }
        })
        chart.tooltip({
          showCrosshairs: true,
          showItemMarker: false,
          background: {
            radius: 2,
            fill: '#1890FF',
            padding: [3, 5]
          },
          nameStyle: {
            fill: '#fff'
          },
          onShow: function onShow (ev) {
            const items = ev.items
            items[0].name = items[0].title
          }
        })
        chart.line().position('release*count')
        chart.point().position('release*count').style({
          lineWidth: 1,
          stroke: '#fff'
        })
        chart.scrollBar({
          mode: 'x',
          xStyle: {
            backgroundColor: '#e8e8e8',
            fillerColor: '#808080',
            offsetY: -2
          }
        }) // 按照x轴滑动
        chart.interaction('pan')

        chart.render()
      })
  }
}
</script>

<style scoped>
#container {
  width: 100%;
  height: 21rem;
}
</style>
